<template>
  <view class="bankCardManagement">
    <topTitle title="银行卡管理" />
    <view class="bankList" v-if="bankCardList?.length">
      <view v-for="(item, idx) in bankCardList" :key="idx">
        <view>{{ item.bank_name }}</view>
        <view>{{ item.account_holder }}</view>
        <view>{{ item.card_number }}</view>
        <view
          class="unbind"
          v-if="!item.locked"
          @click="userWithdrawalBankCardDelFn(item.id)"
          >解除綁定</view
        >
      </view>
    </view>
    <up-empty
      icon="/static/image//noData/1.png"
      text="暫無银行卡"
      marginTop="120"
      v-else
    ></up-empty>
    <view class="fix">
      <up-button
        text="+添加新卡"
        @tap="openBankCard"
        type="primary"
      ></up-button>
    </view>
    <bankCard @getBankCardObjFn="getBankCardObjFn" ref="bankCardRef" />
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  UserWithdrawalBankCard,
  UserWithdrawalBankCardDel,
} from "@/api/UserApi";
import bankCard from "../myWallet/components/bankCard.vue";
let bankCardList = ref<Array<any>>([]);
const getUserWithdrawalBankCard = async () => {
  bankCardList.value = await UserWithdrawalBankCard();
};
let bankCardRef = ref<any>(null);
const openBankCard = () => {
  bankCardRef.value.openBankCard(1);
};
const getBankCardObjFn = (e: any) => {
  getUserWithdrawalBankCard();
};
const userWithdrawalBankCardDelFn = async (id: string) => {
  uni.showModal({
    title: "温馨提示",
    content: "確認解除綁定此卡嗎？",
    confirmText: "解除",
    cancelText: "保留",
    success: async (r) => {
      if (r.confirm) {
        await UserWithdrawalBankCardDel({
          id,
        });
        uni.showToast({ title: "解除成功", icon: "none" });
        getUserWithdrawalBankCard();
      }
    },
  });
};

getUserWithdrawalBankCard();
</script>
<style scoped lang="scss">
@import "../../static/scss/pay.scss";
</style>
